<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Demo - Validform - 一行代码搞定整站的表单验证！ &copy;瑞金佬的前端路</title>
<link rel="stylesheet" href="demo/css/style.css" type="text/css" media="all" />
<link href="demo/css/demo.css" type="text/css" rel="stylesheet" />
<style>
.Validform_checktip{margin:4px 0 12px 92px;}
.formsub label{display:inline-block; width:70px;}
.action{padding-left:92px;}
</style>
</head>

<body>  
<div class="header">
    <div class="wraper">
    	<h1><a href="http://validform.rjboy.cn">Validform</a></h1>
        <ul class="nav">
            <li><a href="http://validform.rjboy.cn/">关于Validform</a></li>
            <li><a href="demo.html" class="current">Demo</a></li>
            <li><a href="document.html">文档</a></li>
            <li><a href="help.html">帮助</a></li>
            <li><a href="http://validform.rjboy.cn/?p=1">网友讨论</a></li>
        </ul>
    </div>
</div>
<div class="main">
    <div class="wraper">
        <p class="tr"><a href="demo.html" class="blue ml10 fz12">返回示例首页&raquo;</a></p>
        
    	<h2 class="green">Validform没有限定只能使用table布局，任何结构都是可以的</h2>
        
        <form class="registerform" action="demo/ajax_post.php">
            <div class="formsub">
            	<ul>
                	<li>
                    	<label><span class="need">*</span> 昵称：</label>
                    	<input type="text" value="" name="name" class="inputxt" datatype="s6-18" ajaxurl="demo/valid.php" errormsg="昵称至少6个字符,最多18个字符！" />
                        <div class="Validform_checktip">昵称为6~18个字符</div>
                    </li>
                    <li>
                    	<label><span class="need">*</span> 密码：</label>
                    	<input type="password" value="" name="userpassword" class="inputxt" datatype="*6-16" nullmsg="请设置密码！" errormsg="密码范围在6~16位之间！" />
                        <div class="Validform_checktip">密码范围在6~16位之间</div>
                    </li>
                    <li>
                    	<label><span class="need">*</span> 确认密码：</label>
                    	<input type="password" value="" name="userpassword2" class="inputxt" datatype="*" recheck="userpassword" nullmsg="请再输入一次密码！" errormsg="您两次输入的账号密码不一致！" />
                        <div class="Validform_checktip">两次输入密码需一致</div>
                    </li>
                </ul>
                <div class="action">
                	<input type="submit" value="提 交" /> <input type="reset" value="重 置" />
                </div>
            </div>
        </form>
        
        <h2>说明：</h2>
        <div class="tipmsg">
        	<p>Validform没有限定只能使用table布局，任何结构都是可以的。</p>
            <p>tiptype可以为1、2 和 自定义函数。通过自定义函数可以在任意结构下实现几乎所有你想要的提示效果。</p>
        </div>
         
    </div>
</div>

<div class="footer">
    <div class="wraper">
        <p class="fl">Copyright &copy; <a href="http://www.eloocor.com" target="_blank">易罗客</a></p>
        <p class="fr"><a href="http://www.rjboy.cn" target="_blank">瑞金佬的前端路</a><b> | </b><a href="http://validform.rjboy.cn">Validform</a><b> | </b><a href="http://www.rjboy.cn/?p=789" target="_blank">hScrollpane</a><b> | </b><a href="http://www.rjboy.cn/?p=708" target="_blank">Xslider</a></p>
    </div>
</div>

<script type="text/javascript" src="demo/js/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="demo/js/Validform_v5.3.2_min.js"></script>

<script type="text/javascript">
$(function(){
	//$(".registerform").Validform();  //就这一行代码！;
		
	$(".registerform").Validform({
		tiptype:function(msg,o,cssctl){
			//msg：提示信息;
			//o:{obj:*,type:*,curform:*}, obj指向的是当前验证的表单元素（或表单对象），type指示提示的状态，值为1、2、3、4， 1：正在检测/提交数据，2：通过验证，3：验证失败，4：提示ignore状态, curform为当前form对象;
			//cssctl:内置的提示信息样式控制函数，该函数需传入两个参数：显示提示信息的对象 和 当前提示的状态（既形参o中的type）;
			if(!o.obj.is("form")){//验证表单元素时o.obj为该表单元素，全部验证通过提交表单时o.obj为该表单对象;
				var objtip=o.obj.siblings(".Validform_checktip");
				cssctl(objtip,o.type);
				objtip.text(msg);
			}
		}
	});
})
</script>
</body>
</html>